// ignore_for_file: file_names, use_super_parameters

import 'dart:math';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class MyApp12 extends StatelessWidget {
  const MyApp12({super.key});

  @override
  Widget build(BuildContext context) {
    // 提供数据
    const Map orderInfo = {
      "createTime": "2024-08-15 21:49:48",
      "orderState": 2,
      "image":
          "https://yanxuan-item.nosdn.127.net/a09de222ed32efa8ffe359b1d5780574.jpg",
      "name": "茶水分离杯耐热隔热玻璃杯，茶水分离杯耐热隔热玻璃杯，茶水分离杯耐热隔热玻璃杯，茶水分离杯耐热隔热玻璃杯",
      "totalNum": 2,
      "curPrice": 119.5,
      "totalMoney": 119.5,
      "attrsText": "规格:白色240ml"
    };

    return Scaffold(
        // 1.1 导航
        appBar: AppBar(
          title: const Text('案例-商品订单详情'),
          backgroundColor: Colors.pink,
        ),
        // 1.2 主体内容
        body: Container(
          width: double.infinity,
          height: 250,
          padding: const EdgeInsets.all(10),
          color: const Color.fromARGB(255, 240, 242, 243),
          child: Column(children: [
            // 1.2.1 第一层
            Row(
              children: [
                Text(orderInfo['createTime']),
                const Spacer(),
                Text(
                  orderInfo['orderState'] == 2 ? '待收货' : '待付款',
                  style: TextStyle(
                    color:
                        orderInfo['orderState'] == 2 ? Colors.red : Colors.blue,
                  ),
                ),
              ],
            ),
            // 1.2.2 第二层
            Padding(
              padding: const EdgeInsets.only(top: 10),
              child: Row(
                // 侧轴方向起始位置对齐
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // 左侧
                  Image(
                    image: NetworkImage(orderInfo['image']),
                    width: 50,
                    height: 50,
                  ),
                  // 右侧
                  Expanded(
                      child: Padding(
                    padding: const EdgeInsets.only(left: 10),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        // 商品名称 + 数量
                        Row(
                          children: [
                            Expanded(
                              child: Text(orderInfo['name']),
                            ),
                            Text('X${orderInfo['totalNum']}'),
                          ],
                        ),
                        // 规格
                        Padding(
                            padding: const EdgeInsets.only(top: 10),
                            child: Container(
                              padding: const EdgeInsets.all(5),
                              decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.circular(5),
                              ),
                              child: Text(
                                orderInfo['attrsText'],
                                maxLines: 1,
                                style: const TextStyle(color: Colors.grey),
                              ),
                            )),
                        // 价格
                        Padding(
                          padding: const EdgeInsets.only(top: 5),
                          child: Text('￥${orderInfo['curPrice']}'),
                        )
                      ],
                    ),
                  ))
                ],
              ),
            ),
            // 1.2.3 第三层
            // 合计，右对齐
            Padding(
              padding: const EdgeInsets.only(top: 10),
              child: Row(
                children: [
                  const Spacer(),
                  const Text('合计：'),
                  Text('￥${orderInfo['totalMoney']}'),
                ],
              ),
            ),
            // 1.2.4 第四层
            // 两个按钮 确认收货，取消订单
            Padding(
                padding: const EdgeInsets.only(top: 10),
                child: Row(children: [
                  const Spacer(),
                  ElevatedButton(
                    onPressed: () {},
                    style:
                        ElevatedButton.styleFrom(backgroundColor: Colors.red),
                    child: const Text('确认收货',
                        style: TextStyle(color: Colors.white)),
                  ),
                  const SizedBox(
                    width: 10,
                  ),
                  ElevatedButton(
                    onPressed: () {},
                    style:
                        ElevatedButton.styleFrom(backgroundColor: Colors.cyan),
                    child: const Text('取消订单',
                        style: TextStyle(color: Colors.white)),
                  ),
                ]))
          ]),
        ));
  }
}
